<template>
    <el-container>
        <el-header style="padding: 0; height: 65px;">
            <Header :selected="0" />
        </el-header>
        <el-main style="padding: 0;">
            <div v-if="loading" style="padding: 0;" class="loading-area">

            </div>
            <div v-else>
                <div class="banner">
                    <div class="carousel">
                        <swiper ref="swiper" style="padding: 12px 0 24px 0" :options="swiperOptions">
                            <swiper-slide v-for="(item,index) in banners" :key="index">
                                <img class="image" :src="item.url" @click="openMorePage(item.title)">
                            </swiper-slide>
                        </swiper>
                        <div class="swiper-button-prev btn-prev" @click='swiperPrev'></div>
                        <div class="swiper-button-next btn-next" @click='swiperNext'></div>
                    </div>
                </div>
                <HorizonalAppCard title="精品应用" :apps="apps1" />
                <HorizonalAppCard title="为你推荐" :apps="apps2" />
                <HorizonalAppCard title="潜力爆款" :apps="apps3" />
                <VerticalAppCard title="大家都在用" :apps="apps4" />
            </div>
        </el-main>
        <el-footer style="padding: 0;">
            <Footer />
        </el-footer>
    </el-container>
</template>

<script>
import { getSync } from '@/util/request'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import HorizonalAppCard from '@/components/HorizonalAppCard.vue'
import VerticalAppCard from '@/components/VerticalAppCard.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
let _this = null
let autoplay = null
export default {
    name: 'Featured',
    components: {
        Header,
        Footer,
        HorizonalAppCard,
        VerticalAppCard,
        swiper,
        swiperSlide
    },
    data() {
        return {
            loading: true,
            swiperOptions: {
                loop: true,
                grabCursor: true,
                freeMode: true,
                slidesPerView: 2,
                spaceBetween: 16,
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
            },
            banners: [
                {
                    title: '生活管家',
                    url: "https://appimg.dbankcdn.com/entranceIcon/74ddfa53ce2244848e4b4c61471a7353/64/1595299783266_1080x684.jpg"
                },
                {
                    title: '科普知识',
                    url: "https://appimg.dbankcdn.com/entranceIcon/9a3d003858bc47969d2bb461a2c11b12/64/1595299811024_1080x684.jpg"
                },
                {
                    title: '匠心之美',
                    url: "https://appimg.dbankcdn.com/entranceIcon/f2d2895630c14be28306aa5466e76754/64/1595299797898_1080x684.jpg"
                },
                {
                    title: '解压神器',
                    url: "https://appimg.dbankcdn.com/entranceIcon/72e6129b8f7444a399d91c875d15c620/64/1595299825119_1080x684.jpg"
                }
            ],
            apps1: [],
            apps2: [],
            apps3: [],
            apps4: []
        }
    },
    mounted() {
        _this = this
        const lo = this.$loading({
            lock: true,
            spinner: 'el-icon-loading',
            background: '#fff',
            target: document.querySelector('.loading-area')
        })
        autoplay = setInterval(() => {
            _this.$refs.swiper.swiper.slideNext()
        }, 3000)
        getSync('/api/page/index').then((res) => {
            if (res.code == 200) {
                this.apps1 = res.data.app1
                this.apps2 = res.data.app2
                this.apps3 = res.data.app3
                this.apps4 = res.data.app4
                this.loading = false
                lo.close()
            }
        })
    },
    destroyed() {
        if (autoplay != null) {
            clearInterval(autoplay)
        }
    },
    methods: {
        swiperPrev() {
            _this.$refs.swiper.swiper.slidePrev()
        },
        swiperNext() {
            _this.$refs.swiper.swiper.slideNext()
        },
        openMorePage: (title) => {
            document.documentElement.scrollTop = 0
            _this.$router.push({
                name: 'More',
                params: {
                    title: title
                }
            }, () => {
                location.reload()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.loading-area {
    height: 600px;
    border-top: 1px solid #f2f2f2;
}

.banner {
    width: 968px;
    margin: 12px auto;

    .carousel {
        position: relative;

        .image {
            width: 476px;
            height: 268px;
            border-radius: 12px;
        }

        .btn-prev {
            width: 48px;
            height: 48px;
            margin-left: 15px;
            background-image: url('');
            background-size: 48px;
        }

        .btn-prev:hover {
            background-image: url('');
        }

        .btn-next {
            width: 48px;
            height: 48px;
            margin-right: 15px;
            background-image: url('');
            background-size: 48px;
        }

        .btn-next:hover {
            background-image: url('');
        }
    }
}
</style>